<template>
    <div class="collelig-box">
      <el-button-group>
        <el-button type="primary" :class="currentBtnState==1?'isActive':''" @click="clickQualifBtn">资格</el-button>
        <el-button type="primary" :class="currentBtnState==2?'isActive':''" @click="clickCollateralBtn">押率</el-button>
        <el-button type="primary" :class="currentBtnState==3?'isActive':''" @click="clickFlowBtn">流程</el-button>
        <el-button type="primary" :class="currentBtnState==4?'isActive':''" @click="clickMaterialsBtn">材料</el-button>
      </el-button-group>

      <!-- 关键资格 ************************* -->
      <keyQualif :supplyVarId="supplyVarId" :conditionIds="conditionIds" :copyQualifData="copyQualifData" v-if="currentBtnState==1"></keyQualif>

      <!-- 押品押率 ************************* -->
      <Collateral :supplyVarId="supplyVarId" :copyCollData="copyCollData" v-else-if="currentBtnState==2"></Collateral>

      <!-- 流程 ************************* -->
      <Step :cascaderValue="cascaderValue" :copyData="copyData" v-else-if="currentBtnState==3"></Step>

      <!-- 材料 ************************* -->
      <Stuff :cascaderValue="cascaderValue" :copyStuffData="copyStuffData" v-else-if="currentBtnState==4"></Stuff>
    </div>
</template>

<script>
import NewCard from "@/wss/components/newCard.vue";
import KeyQualif from "./keyQualif.vue"
import Collateral from "./collateral.vue"
import Step from "@/wss/newViews/product/project/standard/step.vue"
import Stuff from "./stuff.vue"
import {getLoanProjectTypeIdApi} from "@/wss/newApi_3-24/tool/loan.js"
export default {
    components:{
      NewCard,
      KeyQualif,
      Collateral,
      Step,
      Stuff
    },
    data(){
      return{
        currentBtnState: 1,// 当前点击的按钮 1关键资格 2押品押率 3项目流程 4项目材料
        
        bottomBtnShow:true,//底部按钮
        bottomBtnValue:'',//底部输入值

        editBtnState: false,// 标识是否为保存按钮的状态
        editDrawer: false,//编辑材料的状态
        drawerState:false,//当前 材料抽屉的状态
        temTableList:[],//暂存的数据

        supplyVarId:'',//供应品种的id
        conditionIds:'',// 关键资格条件集合码
        copyQualifData: [],// 关键资格的复制数据

        copyCollData:[],// 押品押率的复制数据

        cascaderValue:[],//发送给流程和材料的 1级 2级 3级 目前只需要3级
        copyData:[],// 当前复制的流程数据

        copyStuffData:[],// 材料的复制数据

        projectType1:'',//智慧贷款一级id
        projectType2:'',//智慧贷款二级id
      }
    },
    mounted(){
      this.getLoanProjectTypeId()// 查询智慧贷款的一级id和二级id

      // 接收供应品种的id
      this.$bus.$on('getSupplyVarId',(id,conditionIds,projectId)=>{
          this.supplyVarId = id
          this.conditionIds = conditionIds
          //发送给流程和材料的 1级 2级 3级 目前只需要3级
          this.cascaderValue = []
          this.cascaderValue.push(this.projectType1)
          this.cascaderValue.push(this.projectType2)
          this.cascaderValue.push(projectId)
      })

      // 点击复制流程的按钮
      this.$bus.$on('clickCopyBtn',(step)=>{
        this.copyData = step
        if(this.copyData.length>0){
          this.$message({message: '复制成功',type: 'success'});
        }
      })

      // 点击复制关键资格的按钮
      this.$bus.$on('copyDataBus',(qualifData)=>{
        this.copyQualifData = qualifData
        if(this.copyQualifData.length>0){
          this.$message({message: '复制成功',type: 'success'});
        }
      })
      
      // 点击复制押品押率的按钮
      this.$bus.$on('copyCollateralBus',(collateralData)=>{
        this.copyCollData = collateralData
        if(this.copyCollData.length>0){
          this.$message({message: '复制成功',type: 'success'});
        }
      })

      // 点击复制材料的按钮
      this.$bus.$on('copyStuffBus',(stuff)=>{
        this.copyStuffData = stuff
        if(this.copyStuffData.length>0){
          this.$message({message: '复制成功',type: 'success'});
        }
      })

    },
    methods:{
      // 查询智慧贷款的一级id和二级id
      async getLoanProjectTypeId(){
        let result = await getLoanProjectTypeIdApi()
        if(result.code==200){
          this.projectType1 = result.projectType1
          this.projectType2 = result.projectType2
        }
      },

        // 点击关键资格按钮
        clickQualifBtn(){
          this.currentBtnState=1
        },
        //点击押品押率按钮
        clickCollateralBtn(){
          this.currentBtnState=2
        },

        // 点击项目流程
        clickFlowBtn(){
          this.currentBtnState=3
        },

        // 点击项目材料
        clickMaterialsBtn(){
          this.currentBtnState=4
        },
        
        //点击操作按钮
        clickEdit(){
            if(this.currentBtnState==1){
                this.$bus.$emit('openKeyQua') //打开关键资格的抽屉
            }else if(this.currentBtnState==2){
                this.$bus.$emit('openCollat') //打开押品押率的抽屉
            }
        },
    },
}
</script>

<style scoped>
ul,h1,h3,h4,p {
  margin: 0;
  padding: 0;
  list-style: none;
}
.collelig-box{
  position: relative;
  height: 100%;
}
.collelig-box >>> .top .left{
  flex: 5;
  min-height: 45px;
}
.collelig-box >>> .top .left h1{
  margin: 11px 0;
  min-height: 18px;
}
/* 按钮组 */
.el-button-group{
  position: absolute;
  left: 55px;
  top: 10px;
  z-index: 2;
}
.el-button-group .el-button{
  background-color: #F0F2F5;
  color: #2E3F5E;
  border: 1px solid #F0F2F5;
  padding: 6px 12px;
}
.el-button-group .el-button.isActive{
  background-color: #fff;
  color: #F87A23;
  font-weight: bold;
}

/* 项目样式 */
.collelig-box >>> .stepbox{
  padding: 0 30px;
}

@media (max-width: 1480px) {
  ::v-deep .top .left h1 img{
    margin-right: 6px;
  }
  .el-button-group{
    top: 5px;
  }
  .el-button-group .el-button{
    padding: 10px 8px;
  }
}
/* 操作按钮 */
.handleBtn {
  color: #f87a23;
  font-size: 12px;
}

@media (max-width: 1180px) {
  ::v-deep .top .left{
    flex: 2;
  }
}
</style>
